<template>
	<div id="article_share">
<!-- 作者 -->
		<div class="author_box">
			<img class="img_author" :src="'http://www.zhenlvw.com/'+user.user_img" alt="">

			<div class="author_center">
				<div class="line0_author">
					<span>{{riqi}}</span>
					<span>{{user.teshe}}</span>
				</div>
				<div class="line1_author">
					<span>{{user.user_name}}</span>
				</div>
			</div>

			<div class="author_r">
				<span>已关注</span>
			</div>
		</div>

<!-- 文章详情 -->
		<div class="article_box">
			<P class="article">
				{{wz.title}}
			</P>
			<!-- <img class="article_img" :src="'http://www.zhenlvw.com/'+wz.gg_url" alt=""> -->
			<div id="article_content">
			</div>

			<p class="article_end">——  END  ——</p>
		</div>

<!-- 相关文章 -->

		<div class="aboutArticle_box">
			<p class="aboutArticle_top">- &#160;&#160;相关文章&#160;&#160; -</p>

			<div class="aboutList" v-for="item in xiangguan">
				<div class="item_aboutList">
					<img src="../assets/img/book.png" alt="">
					<span>{{item.title}}</span>
				</div>
			</div>

			<img class="gg" :src="'http://www.zhenlvw.com/'+wz.gg_url" alt="">

			<p class="titleEnd_aboutArticle">
				点赞就成，打赏随缘
			</p>

			<div class="buttonD">赞赏支持</div>

			<div class="aboutArticle_end">
				<div class="l_aboutArticle_end">
					<img class="zan_img" src="../assets/img/xin.png" alt="">
					<span class="zanNum">{{dianzan}}</span>
				</div>
				<span>©著作权归XX所有</span>
			</div>
		</div>

<!-- 商品直达 -->
		<div class="shopStraight_box">
			<div class="shop_straight">
				- 商品直达 -
			</div>

			<div class="shopList_box" >
				<div class="item_shop" v-for="item in goods">
					<div class="shopT">
						<img class="goodsImg" :src="'http://www.zhenlvw.com/'+item.goods_img" alt="">
						<img src="../assets/img/HSign.png" alt="" class="biaoqian">
						<img src="../assets/img/cart.png" alt="" class="cart">
					</div>
					<div class="shopBom">
						<div class="line0">{{item.goods_brief}}</div>
						<div class="line1">已售{{item.virtual_sales}}份</div>
						<div class="line2">
							<span>￥{{item.shop_price}}</span>
							<span>包邮</span>
						</div>
					</div>
				</div>
			</div>

			<div class="maiY">
				一键购买
			</div>

		</div>

<!-- 文章评论 -->
		<div class="pingLun_box">
			<div class="title_ping">
				- 文章评论 -
			</div>

			<div class="pingQ_box">
				<div class="item_Ping">
					<div class="line0">
						<img class="user_Img" :src="'http://www.zhenlvw.com/'+user.user_img"  alt="">
						<div class="line0_center">
							<span class="user_name">随便搞搞随便搞搞...</span>
							<img class="pai" src="../assets/img/yStar.png" alt="">
						</div>
						<div class="line0_r">
							<img src="../assets/img/xin.png" alt="">
							<span>100</span>
						</div>
					</div>

					<div class="line1">
						但是撒旦立刻赶回事故的哈了考试大纲圣诞快乐是德爱丽丝开发艾瑞克垃圾萨克洛夫尔来福就无色了个鸡毛
					</div>

					<div class="line2">
						<span>06-34</span>
						<span>11:17</span>
						<span>. 评论</span>
					</div>

					<div class="line3">
						查看全部评论
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
export default {
	name: 'article_share',
	data () {
		return {
			msg: 'article_share',
			'user':{},
			'riqi':'',
			'wz':{},
			'xiangguan':[],
			'dianzan':0,
			'goods':[]
		}
	}, 
	created(){
	    function getUrlParam(name) {
	        var canname = name
	        var json = {}
	        var href = location.hash
	        var hrefUrl = href.split('?')
	        console.log(hrefUrl[1])
	        if(hrefUrl[1].indexOf('&') > 0){
	          //有 & 
	          var hrefArr = hrefUrl[1].split('&')
	          console.log(hrefArr)
	          for (var i = 0; i < hrefArr.length; i++) {
	            var hrefAllArr = hrefArr[i].split('=')
	            json[hrefAllArr[0]] = hrefAllArr[1]
	            return json[canname]
	          }
	        }else{
	          //没有& 
	          var hrefUrlarr = hrefUrl[1].split('=')
	          json[hrefUrlarr[0]] = hrefUrlarr[1]
	          console.log(canname)
	          console.log(json)
	          return json[canname]
	        }
	      }
		let article_id  = getUrlParam('article_id')
		console.log(article_id)
		this.axios.post('http://api-wei.zhenlvw.com/v2/meishi.api.wzxiangqing',{'article_id':article_id})
		.then((res)=>{
			console.log(res.data.data)
			this.user = res.data.data.user
			this.riqi = res.data.data.riqi
			this.wz = res.data.data.wz[0]
			this.changHtml(this.wz.content)
			this.xiangguan = res.data.data.xiangguan
			this.dianzan = res.data.data.dianzan
			this.goods = res.data.data.goods
			console.log(this.xiangguan,this.dianzan)
		})
		.catch((err)=>{
			console.log(err);
		})
		$("title").html("article_share");
	}, 
	methods:{
		changHtml(html1){
			document.getElementById('article_content').innerHTML = html1
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	/**/
	#article_share{
		width: 100%;
	}
/*作者*/
	.author_box{
		width: 100% - 0.6rem;
		padding: 0.39rem 0.29rem 0rem 0.31rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.author_box	.img_author{
		width: 1.2rem;
		height: 1.2rem;
		border-radius: 50%;
		margin-right: 0.1rem;
	}
	.author_box .author_r{
		width: 1.1rem;
		display: flex;
		align-items: center;
	}
	.author_box .author_r span{
		width: 1.1rem;
		height: 0.44rem;
		background:#2C7B8C;
		display: block;
		color:#fff;
		font-size:0.28rem;
		font-family:PingFangSC;
		text-align: center;
	}
	.author_box .author_center{
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding:0.2rem 0rem;
		margin-left: 0.1rem;
	}
	.author_box .author_center .line0_author{

	}
	.author_box .author_center .line0_author span:nth-child(1){
		font-size:0.26rem;
		font-family:PingFangSC;
		color:rgba(0,0,0,1);
		display: inline-block;
	}
	.author_box .author_center .line0_author span:nth-child(2){
		width:0.8rem;
		height:0.38rem;
		display: inline-block;
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(44,123,140,1);
		border:0.01rem solid #2C7B8C;
		text-align: center;
		line-height: 0.38rem;
		margin-left: 0.2rem;
	}
	.author_box .author_center .line1_author span{
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(44,123,140,1);
	}
/*<!-- 文章详情 -->*/
	.article_box{
		width: 100%;
		padding-bottom: 0.6rem;
		border-bottom: 0.01rem solid #909092;
	}
	.article_box .article{
		width: 6.11rem;
		font-size:0.4rem;
		font-family:PingFangSC;
		color:#000;
		margin-top: 0.6rem;
		margin-bottom: 0.4rem;
		margin-left: 0.34rem;
	}
	/*.article_box .article_img{
		width: 6.8rem;
		height: 3.6rem;
		margin-left: 0.34rem;
		display: block;
	}*/
	#article_content{
		width: 6.8rem;
		margin-left: 0.34rem;
		margin-top: 0.4rem;
	}
	.article_box .article_end{
		text-align: center;
		color:#2C7B8C;
	}
/*相关文章*/
	.aboutArticle_box{
		width: 100%;
		padding:0.7rem 0rem;
		border-bottom: 0.01rem solid #909092;
	}
	.aboutArticle_box .aboutArticle_top{
		width: 100%;
		text-align: center;
		font-size:0.32rem;
		font-family:PingFangSC;
		color:#2C7B8C;
		margin-bottom: 0.7rem;
	}
	.aboutArticle_box .aboutList{
		width: 100% - 0.34rem;
		padding-left: 0.34rem;
	}
	.aboutArticle_box .item_aboutList{
		display: flex;
		align-items: center;
		margin-bottom: 0.4rem;
	}
	.aboutArticle_box .item_aboutList img{
		width: 0.36rem;
		height: 0.36rem;
		margin-right: 0.1rem;
	}
	.aboutArticle_box .item_aboutList span{
		font-size:0.28rem;
		font-family:PingFangSC;
		color:#000;
		border-bottom: 0.01rem solid #2C7B8C;
	}
	.aboutArticle_box .gg{
		width: 6.8rem;
		height: 2.68rem;
		margin-left: 0.34rem;
		display: block;
		margin-bottom: 0.58rem;
	}
	.aboutArticle_box .titleEnd_aboutArticle{
		text-align: center;
		font-size:0.32rem;
		font-family:PingFangSC;
		color:rgba(44,123,140,1);
		margin-bottom: 0.57rem;
	}
	.aboutArticle_box .buttonD{
		width: 2.68rem;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		color:#fff;
		background: #FB775E;
		font-size:0.4rem;
		font-family:PingFangSC;
		border-radius: 0.45rem;
		margin:0 auto 0.6rem;
		display: block;
		letter-spacing: 0.1rem;
	}
	.aboutArticle_box .aboutArticle_end{
		width: 100%-0.6rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0rem 0.3rem;
	}

	.aboutArticle_box .l_aboutArticle_end{
		display: flex;
		align-items: center;
	}
	.aboutArticle_box .zan_img{
		width: 0.51rem;
		height: 0.52rem;
		margin-right: 0.2rem;
	}
	.aboutArticle_box .zanNum{
		font-size:0.26rem;
		font-family:PingFangSC;
		color:rgba(144,144,146,1);
	}
	.aboutArticle_box .aboutArticle_end>span{
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(144,144,146,1);
	}
/*<!-- 商品直达 -->*/
		.shopStraight_box{
			width: 100%;
			padding-top:0.7rem;
			border-bottom: 1px solid #909092;
		}
		.shopStraight_box .shop_straight{
			font-size:0.32rem;
			text-align: center;
			font-family:PingFangSC;
			color:rgba(44,123,140,1);
			margin-bottom: 0.7rem;
		}
		.shopStraight_box .shopList_box{
			width: 100%-0.6rem;
			display: flex;
			justify-content: space-between;
			padding:0rem 0.3rem;
			flex-wrap: wrap;
		}
		.item_shop{
			width: 3.35rem;
			/*border:1px solid #ccc;*/
			position: relative;
		}
		.shopT{
			width: 3.35rem;
			height: 3.35rem;
			margin-bottom: 0.2rem;
			position: relative;

		}
		.shopStraight_box .goodsImg{
			width: 3.35rem;
			height: 3.35rem;
		}
		.shopStraight_box .biaoqian{
			width: 0.6rem;
			height: 0.8rem;
			position: absolute;
			left:0.2rem;
			top:0rem;
		}
		.shopStraight_box .cart{
			width: 0.64rem;
			height: 0.64rem;
			border-radius: 50%;
			position: absolute;
			right: 0.1rem;
			bottom: 0.1rem;
		}
		.shopStraight_box .shopBom{

		}
		.shopStraight_box .line0{
			width: 100%;
			font-size:0.32rem;
			font-family:PingFangSC;
			color:#000;
			margin-bottom: 0.2rem;	
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;


		}
		.shopStraight_box .line1{
			font-size:0.28rem;
			font-family:PingFangSC;
			color:rgba(144,144,146,1);
			margin-bottom: 0.2rem;
		}
		.shopStraight_box .line2{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.shopStraight_box .line2 span:nth-child(1){
			font-size:0.36rem;
			font-family:PingFangSC;
			color:rgba(44,123,140,1);
		}
		.shopStraight_box .line2 span:nth-child(2){
			width:0.80rem;
			height:0.36rem;
			border:1px solid #FB775E;
			border-radius: 0.18rem;
			font-size:0.26rem;
			font-family:PingFangSC;
			color:#FB775E;
			text-align: center;
		}
		.shopStraight_box .maiY{
			width:2.66rem;
			height:0.90rem;
			background:rgba(251,119,94,1);
			border-radius:0.45rem;
			color:#fff;
			font-size:0.40rem;
			font-family:PingFangSC;
			text-align: center;
			line-height: 0.9rem;
			margin:0.6rem auto 0.59rem;
		}

/*文章评论*/
	.pingLun_box{
		width: 100%;
		padding-top:0.7rem;
	}
	.pingLun_box .title_ping{
		width: 100%;
		text-align: center;
		font-size:0.32rem;
		font-family:PingFangSC;
		color:#2C7B8C;
		margin-bottom: 0.69rem;
	}
	.pingLun_box .pingQ_box{
		width: 100%;
	}
	.pingLun_box .item_Ping{
		width:100% - 0.6rem;
		padding:0rem 0.3rem;
	}
	.pingLun_box .line0{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pingLun_box .line0 img{
		margin-right: 0.1rem;
	}
	.pingLun_box .item_Ping .line1{
		font-size:0.30rem;
		font-family:PingFangSC;
		color:rgba(0,0,0,1);
		padding-left: 1rem;
	}
	.pingLun_box .user_Img{
		width: 0.88rem;
		height: 0.88rem;
		border-radius: 50%;
	}
	.pingLun_box .line0_center{
		flex:1;
		display: flex;
		align-items: center;
	}
	.pingLun_box .line0_center span{
		font-size:0.28rem;
		font-family:PingFangSC;
		color:rgba(0,0,0,1);
	}
	.pingLun_box .line0_center img{
		width: 0.20rem;
		height: 0.30rem;
		margin-left: 0.2rem;
	}

	.pingLun_box .line0_r{
		width: 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.pingLun_box .line0_r img{
		width: 0.35rem;
		height: 0.36rem;
	}
	.pingLun_box .line0_r span{
		font-size:0.30rem;
		font-family:PingFangSC;
		color:rgba(251,119,94,1);
	}

	.pingLun_box .item_Ping .line2{
		font-size:0.24;
		font-family:PingFangSC;
		color:rgba(0,0,0,1);
		padding-left: 1rem;
		padding-top:0.2rem;
	}

	.pingLun_box .item_Ping .line2 span{
		font-size:0.24rem;
		font-family:PingFangSC;
		color:rgba(0,0,0,1);
		margin-right: 0.1rem;
	}

	.pingLun_box .item_Ping .line3{
		width:2.20rem;
		height:0.60rem;
		background:rgba(251,119,94,1);
		border-radius:0.30rem;
		text-align: center;
		line-height: 0.60rem;
		color:#fff;
		font-size:0.28rem;
		font-family:PingFangSC;
		color:rgba(255,255,255,1);
		margin:0.3rem auto;
	}
	
</style>